// src/components/popups/reportsDownload/sponsorsReport/SponsorsReportDownloadConfirmModal.tsx

import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { FaDownload } from 'react-icons/fa';

interface SponsorsReportDownloadConfirmProps {
  isOpen: boolean;
  onConfirm: (cocode: string) => void;
  onCancel: () => void;
  loading?: boolean;
}

const SponsorsReportDownloadConfirmModal: React.FC<SponsorsReportDownloadConfirmProps> = ({ isOpen, onConfirm, onCancel, loading }) => {
  const [cocode, setCocode] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (isOpen && inputRef.current) inputRef.current.focus();
    if (!isOpen) setCocode('');
  }, [isOpen]);

  if (!isOpen) return null;

  const handleConfirm = () => {
    onConfirm(cocode.trim());
  };

  const modalContent = (
    <div className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 backdrop-blur-sm">
      <div className="bg-white dark:bg-slate-900 max-w-md w-[92%] mx-auto my-auto rounded-3xl shadow-2xl dark:shadow-blue-900 border border-gray-100 dark:border-slate-800 px-6 sm:px-8 py-10 text-center animate-fade-in-up font-poppins max-h-[90vh] overflow-y-auto transition-all duration-300">
        <div className="flex items-center justify-center mb-7">
          <div className="bg-gradient-to-br from-blue-600 to-cyan-400 dark:from-blue-700 dark:to-cyan-700 p-4 rounded-full shadow-lg">
            <FaDownload className="text-white text-2xl" />
          </div>
        </div>
        <h2 className="text-2xl sm:text-3xl font-extrabold text-blue-700 dark:text-cyan-300 mb-3 tracking-tight">Download Report</h2>
        <p className="text-base sm:text-lg text-gray-600 dark:text-gray-300 mb-7 leading-relaxed">
          Please enter the Company Code (Cocode) or Umbrella Code for the sponsor commitment report you want to download.
        </p>
        <div className="mb-8">
          <label htmlFor="cocode-input" className="block text-sm font-semibold text-gray-700 dark:text-gray-200 mb-2 text-left">
            Company Code or Umbrella Code
          </label>
          <input
            id="cocode-input"
            ref={inputRef}
            type="text"
            value={cocode}
            onChange={e => setCocode(e.target.value)}
            placeholder="Enter Company Code or Umbrella Code"
            className="w-full px-4 py-3 border-2 border-gray-300 dark:border-slate-700 rounded-xl text-base focus:ring-2 focus:ring-blue-400 focus:border-blue-400 dark:focus:ring-cyan-400 dark:focus:border-cyan-400 transition-all duration-200 bg-gray-50 dark:bg-slate-800 hover:bg-white dark:hover:bg-slate-700 text-gray-900 dark:text-gray-100"
            onKeyDown={e => { if (e.key === 'Enter' && cocode.trim() && !loading) handleConfirm(); }}
            disabled={loading}
          />
        </div>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <button
            onClick={onCancel}
            className="flex-1 px-6 py-3 text-base font-semibold text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-slate-800 border border-gray-200 dark:border-slate-700 rounded-xl hover:bg-gray-200 dark:hover:bg-slate-700 hover:text-gray-800 dark:hover:text-cyan-300 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-cyan-700"
            disabled={loading}
          >
            Cancel
          </button>
          <button
            onClick={handleConfirm}
            className="flex-1 px-6 py-3 text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-cyan-500 dark:from-blue-700 dark:to-cyan-700 rounded-xl hover:from-blue-700 hover:to-cyan-600 dark:hover:from-blue-800 dark:hover:to-cyan-800 shadow-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-cyan-400 disabled:opacity-50 disabled:cursor-not-allowed"
            disabled={!cocode.trim() || loading}
          >
            {loading ? (
              <span className="flex items-center justify-center gap-2">
                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                Downloading...
              </span>
            ) : (
              'Download'
            )}
          </button>
        </div>
      </div>
    </div>
  );

  return ReactDOM.createPortal(modalContent, document.body);
};

export default SponsorsReportDownloadConfirmModal;